<template>
  <div class="main">
    <div class="saleing-detail">
      <div class="title disflex">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height:70px;">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="detail bgfff">
        <div class="d-show">
          <img src="http://ecplf.com/static/upload/news/156073784119.jpg">
          <h2>非标零件03</h2>
          <p>出货地： 河北廊坊</p>
          <p>交货周期： 20天</p>
          <p class="red">¥50000.00</p>
          <br>
          <p class="disflex">
            <span class="red">已售：2次</span>&nbsp;&nbsp;&nbsp;
            <span>剩余：2次</span>
          </p>
          <p>
            联系方式：13*****333（购买后可见
            <em class="red">单价：¥50</em>）
          </p>
          <br>
          <p>
            <el-button type="primary" @click="buyInfo">购买获取联系方式</el-button>
            <span class="red">
              <i class="el-icon-warning-outline"></i>购买须知
            </span>
          </p>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <!-- dshow --end -->
        <div class="buycanshu" style="margin:20px 0;">
          <el-tabs type="border-card">
            <el-tab-pane label="产品描述">
              <div class="buycon">
                <p>三星电子计划于2020年实现该技术的商用化为目标，全面研发5G移动通信核心技术。随着三星电子研发出这一技术，世界各国的第五代移动通信技术的研究将更加活跃，其国际标准的出台和商用化也将提速。</p>
                <p>三星电子计划于2020年实现该技术的商用化为目标，全面研发5G移动通信核心技术。随着三星电子研发出这一技术，世界各国的第五代移动通信技术的研究将更加活跃，其国际标准的出台和商用化也将提速。</p>
                <p>三星电子计划于2020年实现该技术的商用化为目标，全面研发5G移动通信核心技术。随着三星电子研发出这一技术，世界各国的第五代移动通信技术的研究将更加活跃，其国际标准的出台和商用化也将提速。</p>
                <p>三星电子计划于2020年实现该技术的商用化为目标，全面研发5G移动通信核心技术。随着三星电子研发出这一技术，世界各国的第五代移动通信技术的研究将更加活跃，其国际标准的出台和商用化也将提速。</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="产品参数">
              <div class="table">
                <table>
                  <tr>
                    <td class="tit">类型</td>
                    <td>类型</td>
                    <td class="tit">品牌</td>
                    <td>类型</td>
                  </tr>
                  <tr>
                    <td class="tit">类型</td>
                    <td>类型</td>
                    <td class="tit">品牌</td>
                    <td>类型</td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- buycanshu --end -->

        <!-- buycon--end -->
      </div>
      <!-- detail --end -->
    </div>
    <!-- saleing --end -->
  </div>
</template>
<script>
// import configs from "../config.js";
import buyList from "@/components/buyList";
export default {
  components: { buyList },
  data() {
    return { dialogVisible: false };
  },
  computed: {},
  mounted() {},
  created() {},

  methods: {
    handleClose(tag) {
      console.log(tag);
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    logoClick(name) {
      this.tags[0].isHide = false;
      this.tags[0].status = name;
    },
    buyInfo() {
      this.dialogVisible = true;
    }
  },

  mounted() {}
};
</script>
<style scoped lang="scss">
.d-show {
  position: relative;
  padding-left: 600px;
  min-height: 500px;
  padding-top: 50px;
  h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  p {
    line-height: 30px;
    color: #666;
    &.red {
      font-size: 30px;
      padding: 10px 0;
    }
  }
  img {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 50px;
  }
}
.table {
  table {
    width: 70%;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    td {
      border: 1px solid #f5f5f5;
      padding: 0 10px;
      &.tit {
        color: #444;
        font-weight: bold;
      }
    }
  }
}
.buycon {
  padding: 20px;
  p {
    line-height: 26px;
    text-indent: 2em;
  }
}
</style>
